<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<!--浮动有破坏性，再计算包含块胡高度时，居然不包含在内-->
<div style="height:auto;min-height:50px; width:200px">
    <div style="float:left;height:100px;width:100px;background-color: red">
    </div>
</div>
<!--此处足以说明一个float影响到BFC块内的各级元素-->
<!--添加或者clear:left试试-->
<!--添加或者overflow:hidden试试-->
<div style="width:200px;height:100px;background-color: green;overflow:hidden">
    <button>按钮1</button>
    <button>按钮1</button>
    <button>按钮1</button>
    <button>按钮1</button><br/>
    <button>按钮1</button><br/>
    <button>按钮1</button><button>按钮1</button><button>按钮1</button>

    <!--说明BFC是个坚固的大方块，根本无法突破-->
    <div style="float:left;height:100px;width:100px;background-color: red">
    </div>

</div>


</body>
</html>